html
  background: #383B44

.jAudio, .jAudio *
  padding: 0
  margin: 0
  box-sizing: border-box
  outline: none
  font-family: "Open Sans"
  color: #888
  font-weight: 100

.jAudio
  +clearfix
  overflow: hidden
  background: #fff
  box-shadow: 0 0 5px rgba(#000, .8)
  margin: 100px auto
  width: 352px

  &--ui
    position: relative
    width: 100%

  &--status-bar
    width: 100%
    z-index: 1
    position: relative
    padding: 100px $spacing $spacing $spacing
    +clearfix

  &--controls
    width: 100%
    background: #fafafa
    +clearfix

    ul
      +clearfix
      overflow: hidden
      width: 100%

    li
      position: relative
      width: 33.3333%
      height: $spacing*2.5
      line-height: $spacing*2.5
      float: left
      list-style: none


  &--control
    position: relative
    overflow: hidden
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background: transparent
    border: 0
    span
      position: absolute
      display: table
      height: $controls-size
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      overflow: hidden
      &:before, &:after
        +before
        height: 0
        float: left
        border-color: transparent
        border-style: solid
    &:active
      background: #f5f5f5

  &--control-prev, &--control-next, &--control-play
    span
      &:before, &:after
        border-top: $controls-size/2 solid transparent
        border-bottom: $controls-size/2 solid transparent


  &--control-prev
    span
      &:before, &:after
        border-right: $controls-size solid #ddd
        border-left: 0
    &:active
      span
        &:before, &:after
          border-right-color: $color !important

  &--control-next
    span
      &:before, &:after
        border-left: $controls-size solid #ddd
        border-right: 0
    &:active
      span
        &:before, &:after
          border-left-color: $color !important

  &--control-play
    span
      &:before
        border-left: $controls-size solid #ddd
        border-right: 0
      &:after
        display: none
    &:active, &.active
      span
        &:before
          border-left-color: $color !important

  &--control-pause
    span
      &:before, &:after
        width: $controls-border-top
        height: $controls-size
        background: $color
        border: 0
      &:before
        margin-right: $controls-border-top
      &:active, &.active
        &:before, &:after
          background: #fff
          margin-right: $controls-border-top


  &--thumb
    position: absolute
    top: 0
    left: 0
    height: 100%
    width: 100%
    +bg

  &--time
    +clearfix
    width: 100%
    *
      width: 50%
      display: block
      float: left
      color: #fff
      text-shadow: 0 1px 1px #000
      font-size: .9rem

    &-elapsed
      text-align: left
    &-total
      text-align: right

  &--details
    *
      color: #fff
      text-shadow: 0 1px 1px #000
      font-size: 1.2rem
      &:first-of-type
        font-weight: bold
    p
      width: 100%
      span
        display: block

  &--progress-bar
    margin: $spacing/1.5 0
    &-wrapper
      width: 100%
      position: relative
      background: rgba(#fff, .3)
      cursor: pointer
      border-radius: $progressbar-dimensions
      overflow: hidden

    &-played
      height: $progressbar-dimensions
      background: $color
      position: relative
      border-radius: $progressbar-dimensions

    &-pointer
      height: $progressbar-dimensions
      width: $progressbar-dimensions
      border-radius: 50%
      position: absolute
      right: 0
      background: #fff

  &--playlist
    background: #fff
    &-item
      display: block
      width: 100%
      padding: $spacing/1.5 $spacing
      +clearfix
      &.active
        background: $color - 10
        border-bottom-color: $color - 10
        *
          color: #fff
      &:not(.active)
        &:hover
          background: #fafafa

      &:last-of-type
        border: 0
        margin-bottom: 0

    &-thumb
      float: left
      margin-right: $spacing/3
      +clearfix
      img
        height: $spacing*1.2
        width: $spacing*1.2
        border-radius: 50%
        float: left
        margin-right: $spacing/4

    &-meta
      &-track-name
        font-size: 1rem
        color: #000
      &-track-artist
        font-size: .8rem
